<template>
	<view class="">
		<view class="form_css">
			<input v-model="queryParams.name" input-align="left" color="#000" font-size="24rpx"
				placeholder-style="color: rgba(0, 0, 0, 0.4);font-size:24rpx;" placeholder="请输入优惠券名称搜索..."
				custom-style="font-size:24rpx;background: transparent" confirm-type="search" />

			<img v-if="queryParams.name" @click="handleClear" class="clear_img"
				src="https://seven-3121.obs.cn-north-4.myhuaweicloud.com/2025%2F7%2F24%2F%E4%B8%8B%E8%BD%BD.png"
				alt="" />
			<image @click="handleSearch" class="search_img"
				src="https://seven-3121.obs.cn-north-4.myhuaweicloud.com/2025%2F7%2F15%2Fshape%402x.png" mode="" />
		</view>

		<view class="form_list">
			<template v-if="list.length !=0">
				<scroll-view scroll-y="true" class="scrollHeight" @scrolltolower="lowerBottom">
					<ul>
						<li v-for="(item,index) in list" :key="index">
							<view class="top_title">
								<image
									src="https://seven-3121.obs.cn-north-4.myhuaweicloud.com/2025%2F7%2F16%2Fimage%402x+%281%29.png" />
								{{item.name}}
							</view>
							<view class="buy_info">
								{{item.info}}
							</view>
							<view class="b_info">
								<view class="">
									<text>卷码编号</text>
									<text>{{item.code}}</text>
								</view>
								<view class="">
									<text>兑换日期</text>
									<text>{{item.createTime}}</text>
								</view>
								<view class="">
									<text>到期日期</text>
									<text>{{item.endTime}}</text>
								</view>
								<view class="">
									<text>核验人</text>
									<text>{{item.finishBy}}</text>
								</view>
								<view class="">
									<text>核验时间</text>
									<text>{{item.finishTime}}</text>
								</view>
							</view>
						</li>
					</ul>
				</scroll-view>
			</template>
			<view v-else>
				<empty img="wbdt" text="暂无核销记录" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		myVerDisList
	} from "@/api/app/index.js"
	export default {
		data() {
			return {
				list: [],
				total: 0,
				queryParams: {
					pageSize: 10,
					pageNum: 1,
					name: ''
				},
			}
		},

		methods: {
			getList() {
				uni.showLoading({
					title: '加载中',
				})
				myVerDisList(this.queryParams).then(res => {
					this.list = [...this.list, ...res.rows]
					this.total = res.total
				}).finally(() => {
					uni.hideLoading()
				})
			},

			// 上拉加载分页
			lowerBottom() {
				const page = this.queryParams.pageSize * this.queryParams.pageNum
				if (page >= this.total) {
					setTimeout(() => {
						uni.hideLoading()
					}, 500)
				} else {
					if (this.queryParams.pageNum <= this.queryParams.pageNum - 1) {
						setTimeout(() => {
							uni.hideLoading()
						}, 500)
					} else {
						uni.showLoading({
							title: '加载中',
						})
						this.queryParams.pageNum++
						this.getList()
					}
					setTimeout(() => {
						uni.hideLoading()
					}, 500)
				}
			},

			handleSearch() {
				this.queryParams.pageNum = 1
				this.list = []
				this.getList()
			},

			handleClear() {
				this.queryParams.pageNum = 1
				this.queryParams.name = ''
				this.list = []
				this.getList()
			}
		}
	}
</script>

<style scoped>
	.form_css {
		width: auto;
		height: 64rpx;
		margin: 0 24rpx;
		position: relative;
	}

	.form_css input {
		width: auto;
		height: 100%;
		border-radius: 26rpx;
		background: #F7F8FA;
		padding-left: 46rpx;
		padding-right: 126rpx;
		font-size: 24rpx;
	}

	.form_css .search_img {
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		right: 34rpx;
		top: 17rpx;
	}

	.form_css .clear_img {
		width: 32rpx;
		height: 32rpx;

		position: absolute;
		right: 80rpx;
		top: 17rpx;
	}

	.form_list {
		width: 100%;
		height: calc(100vh - 556rpx);
		max-height: calc(100vh - 556rpx);
		overflow: auto;
		padding: 16rpx;
		padding-top: 0;
		margin-top: 42rpx;
		box-sizing: border-box;
	}

	.form_list ul {
		padding: 0;
		margin: 0;
	}

	.form_list ul li {
		width: 100%;
		height: auto;
		border-radius: 26rpx;
		background: #F5F9FB;
		box-shadow: inset 0px 0px 1px 0px rgba(0, 0, 0, 0.2);
		margin-bottom: 40rpx;
		list-style: none;
		padding: 34rpx;
		box-sizing: border-box;
	}

	.top_title {
		width: 100%;
		height: auto;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: flex-start;

		font-family: Source Han Sans;
		font-size: 32rpx;
		color: #3D3D3D;
		margin-bottom: 20rpx;
	}

	.top_title image {
		width: 62rpx;
		height: 62rpx;
		margin-right: 6rpx;
	}

	.buy_info {
		width: 100%;
		height: auto;
		font-family: Source Han Sans;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.7);
		padding: 20rpx 24rpx;
		margin-bottom: 28rpx;
		box-sizing: border-box;

		border-radius: 26rpx;
		background: #FFFFFF;
		box-shadow: inset 0px 0px 2rpx 0px rgba(0, 0, 0, 0.2);
	}

	.buy_info>view>view:first-child {
		margin-bottom: 18rpx;
	}

	.b_info {
		width: 100%;
	}

	.b_info>view {
		width: 100%;
		margin-bottom: 12rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		font-family: Source Han Sans;
		font-size: 24rpx;
	}

	.b_info>view:last-child {
		margin-bottom: 0;
	}

	.b_info>view text:first-child {
		color: rgba(0, 0, 0, 0.4);
	}

	.b_info>view text:last-child {
		color: rgba(0, 0, 0, 0.7);
	}
</style>